<template>
  <drawer-item
    :selected="selected"
    :icon="icon"
    :text="title"
    @click.native="onClick"
  ></drawer-item>
</template>
<script>
import DrawerItem from "@/components/DrawerItem";
export default {
  name: "DrawerProject",
  components: {
    DrawerItem
  },
  props: {
    id: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      default: "doughnut_chart"
    },
    title: {
      type: String,
      required: true
    }
  },
  computed: {
    selected() {
      return (
        this.$route.matched.filter(m => m.name === "project").length > 0 &&
        this.$route.params.id === this.id
      );
    }
  },
  methods: {
    onClick() {
      if (this.selected) return;
      this.$router.push({
        name: "project",
        params: { id: this.id }
      });
    }
  }
};
</script>
